/*
 * @Title: 购物车
 * @Created by: ycq 
 */
<template>
	<view>
		<view class="mask" v-if="isMask" @click="closeMask"></view>
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="carbody">
			<view class="shop" v-for="(item,index) in carData" :key='index'>
				<view class="shop-title">
					<image v-if="!item.chooseShop" class="choose-icon" src="/static/shop/unchoose.png" mode="" @click="chooseShop(item)" ></image>
					<image v-if="item.chooseShop" class="choose-icon" src="/static/shop/choose.png" mode=""  @click="unChooseShop(item)"  ></image>
					<label class="all" @click="chAll">{{item.shop}}</label>
					<image src="/static/jiantou.png" class="jt" mode=""></image>
					<text class="quan">领券</text>
				</view>
				<view class="shop-item" v-for="(goods,innerIndex) in item.goodsData" :key='innerIndex'  @touchmove="gtouchmove()" @touchstart='tcStart(index,innerIndex)' @touchend.stop="touchend">
					<image v-if="!goods.choose" class="choose-icon goods" src="/static/shop/unchoose.png" mode="" @click="chooseGoods(index,goods)"></image>
					<image v-if="goods.choose" class="choose-icon goods" src="/static/shop/choose.png" mode=""  @click="unChooseGoods(index,goods)" ></image>
					<image class="goods-img" :src="goods.img" mode=""></image>
					<view class="item-right">
						<text class="goods-title">{{goods.name}}</text>
						<text class="goods-tip">{{goods.type}}</text>
						<text class="goods-price">￥</text><text class="goods-price-num">{{goods.price}}</text>
					</view>
					<view class="jj">
						<image v-if='goods.num>1' src="/static/shop/cjian.png" mode="" @click="minusNum(goods)"></image>
						<image v-if='goods.num<2' src="/static/shop/jian.png" mode=""></image>
						<text>{{goods.num}}</text>
						<image src="/static/shop/jia.png" mode="" @click="addNum(goods)"></image>
					</view>
					<view class="orther-btns" v-if="showBtns&&openIndex == innerIndex&&shopIndex == index">
						<text @click="toColl" >移入收藏夹</text>
						<text @click="deleteG" >删除</text>
						<text @click="toSame" >找相似</text>
					</view>
				</view>
			</view>
			
		</view>
		<Collection v-if='showColl' />
		<view class="bottom">
			<image v-if="!chooseAll" class="choose-icon" src="/static/shop/unchoose.png" mode="" @click="chAll"></image>
			<image v-if="chooseAll" class="choose-icon" src="/static/shop/choose.png" mode=""  @click="chAll"></image>
			<label class="all" @click="chAll">全选</label>
			<view class="Settle" @click="pay">结算({{sum_num}})</view>
			<text class="bottom-label blue">￥{{sum_price}}</text>
			<text class="bottom-label">合计:</text>
		</view>
		<ShopFootMenu :navIndex='1' />
		
	</view>
</template>

<script>
	import ShopFootMenu from '@/components/ShopFootMenu.vue'
	export default{
		components:{
			ShopFootMenu
		},
		data(){
			return{
				chooseAll:false,
				num:1,
				settlePrice:0,
				openIndex:null,
				shopIndex:null,
				settleNum:0,
				showBtns:false,
				isMask:false,
				showColl:false,
				isMoving:false,
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						hasMenu:false,
					},
					left:{
						img:'/static/pos-home.png' , //左侧图标
						text:'沈阳市', //左侧文字
						showPos:false,
					},
					mid:{
						title:'购物车' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
				carData:[
					{
						shop:'波尔德街电',
						chooseShop:false,
						goodsData:[
							{
								name:'宫廷古风中国风口红 长相思持久保湿防水',
								img:'/static/banner.png',
								price:256,
								type:'浅蓝色官方旗舰店；L码；',
								num:1,
								choose:false,
							},
							{
								name:'国粹京剧脸谱戏曲Q版人物吊坠书签金属创意古风',
								img:'/static/banner.png',
								price:49,
								type:'浅蓝色官方旗舰店；L码；',
								num:2,
								choose:false,
							}
						]
					},
					{
						shop:'波尔德街电',
						chooseShop:false,
						goodsData:[
							{
								name:'砚台天然原石 复刻故宫博物院款式 松花砚',
								img:'/static/banner.png',
								price:49,
								type:'浅蓝色官方旗舰店；L码；',
								num:1,
								choose:false,
							}
						]
					},
					{
						shop:'波尔德街电',
						chooseShop:false,
						goodsData:[
							{
								name:'砚台天然原石 复刻故宫博物院款式 松花砚',
								img:'/static/banner.png',
								price:49,
								type:'浅蓝色官方旗舰店；L码；',
								num:1,
								choose:false,
							},
							{
								name:'砚台天然原石 复刻故宫博物院款式 松花砚',
								img:'/static/banner.png',
								price:49,
								type:'浅蓝色官方旗舰店；L码；',
								num:1,
								choose:false,
							},
							{
								name:'砚台天然原石 复刻故宫博物院款式 松花砚',
								img:'/static/banner.png',
								price:49,
								type:'浅蓝色官方旗舰店；L码；',
								num:1,
								choose:false,
							}
						]
					}
				]
			}
		},methods: {
			chAll(){
				this.chooseAll = !this.chooseAll
				if(this.chooseAll){
					
					for(var i=0;i<this.carData.length;i++){
						console.log('111')
						this.chooseShop(this.carData[i])
					}
				}else{
					
					for(var i=0;i<this.carData.length;i++){
						console.log('222')
						this.unChooseShop(this.carData[i])
					}
				}
			},
			toColl(){
				this.closeMask()
				this.showColl = true
				document.body.style.overflow = 'hidden'
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
			deleteG(){
				console.log(111)
				this.closeMask()
				
			},
			toSame(){
				console.log(111)
				this.closeMask()
				uni.navigateTo({
					url:'sameAs'
				})
			},
			addNum(obj){
				obj.num++
				if(obj.choose){
					// this.settleNum ++
					// this.settlePrice += obj.price
				}
			},
			minusNum(obj){
				if(obj.num>1){
					obj.num--
				}
			},
			chooseGoods(index,goods){
				goods.choose = true
				this.watchShop(index)
			},
			unChooseGoods(index,goods){
				goods.choose = false
				this.watchShop(index)
			},
			watchShop(index){
				var num = 0
				this.carData[index].goodsData.forEach((item)=>{
					if(item.choose){
						num++
					}
				})
				if(num>0&&!this.carData[index].chooseShop){
					this.carData[index].chooseShop=true
				}else if(num==0&&this.carData[index].chooseShop){
					this.carData[index].chooseShop=false
				}
			},
			chooseShop(obj){
				obj.goodsData.forEach((item)=>{
					item.choose = true
				})
				obj.chooseShop = true
			},
			unChooseShop(obj){
				obj.goodsData.forEach((item)=>{
					item.choose = false
				})
				obj.chooseShop = false
			},
			pay(){
				uni.navigateTo({
					url:'confirmOrder'
				})
			},
			closeMask(){
				this.isMask = false
				this.showBtns=false
				this.openIndex = null
				this.shopIndex = null
			},
			tcStart(index,index2){
				clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
				// if(this.openIndex != index){
					this.openIndex = index2
					this.shopIndex = index
					this.Loop = setTimeout(function() {
						// this.openMask(index)
						this.showBtns=true
						this.isMask = true
					}.bind(this), 500);
				// }else{
					// this.openMask(index)
				// }
			},
			touchend() {
				clearTimeout(this.Loop);
				// if (this.Loop != 0 && this.isMask == false && !this.isMoving) {
				// 	this.toDetail()
				//  }
				this.isMoving = false
				
				// this.isMask = false
			},
			gtouchmove(){
				this.isMoving = true
			    clearTimeout(this.Loop);//清除定时器;
			},
		},
		computed: {
			'sum_price': function () {
				this.settlePrice = 0;
				this.carData.forEach((item)=>{
					item.goodsData.forEach((_item)=>{
						if(_item.choose){
							this.settlePrice += _item.price*_item.num
						}
						
					})
				})
			  return this.settlePrice
			},/*  */
			'sum_num': function () {
				this.settleNum = 0;
				this.carData.forEach((item)=>{
					item.goodsData.forEach((_item)=>{
						if(_item.choose){
							this.settleNum += _item.num
						}
						
					})
				})
			  return this.settleNum
			},
		  }
		
	}
</script>

<style scoped>
	.mask{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		position: fixed;
		z-index: 25;
		
	}
	.orther-btns{
		width: 424upx;
		height: auto;
		position: absolute;
		background: #FFFFFF;
		z-index: 35;
		top: 0;
		right: 166upx;
	}
	.orther-btns text{
		width: 368upx;
		display: block;
		font-size: 28upx;
		height: 80upx;
		line-height: 80upx;
		padding-left: 56upx;
		border-bottom: rgba(236,236,236,1.00) solid 1upx;
	}
	.orther-btns text:nth-child(2){
		color: red;
	}
	.orther-btns text:last-child{
		border-bottom:none;
	}
	.carbody{
		position: absolute;
		width: 750upx;
		height: calc(100vh - 170px);
		background: #FFFFFF;
		overflow: scroll;
		top: 140upx;
		margin-bottom: 100upx;
	}
	.shop{
		width: 750upx;
		height: auto;
		
		margin-bottom: 40upx;
	}
	.shop-title{
		width: 750upx;
		height: 98upx;
	}
	.quan{
		font-size: 24upx;
		color: #E82D28;
		margin-right: 33upx;
		float: right;
		height: 98upx;
		line-height: 98upx;
	}
	.shop-item{
		width: 750upx;
		height: auto;
		position: relative;
	}
	.goods{
		margin-top: 114upx !important;
		margin-left: 29upx;
		float: left;
	}
	.goods-img{
		width: 196upx;
		height: 206upx;
		float: left;
		margin-top: 33upx;
		margin-left: 18upx;
		border-radius: 10upx;
	}
	.item-right{
		width: 442upx;
		height: 170upx;
		float: right;
		margin-right: 20upx;
		margin-top: 52upx;
	}
	.goods-title{
		width: 442upx;
		font-size: 26upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: auto;
		overflow: hidden;
	}
	.goods-tip{
		font-size: 24upx;
		color: #999999;
		margin-top: 20upx;
		display: block;
		margin-bottom: 5upx;
		margin-left: 26upx;
	}
	.goods-price{
		font-size: 24upx;
		color: #55A0FF;
	}
	.goods-price-num{
		font-size: 28upx;
		color: #55A0FF;
	}
	.jj{
		width: 126upx;
		padding-left: 590upx;
		height: 26upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.jj image{
		width: 26upx;
		height: 26upx;
	}
	.jj text{
		font-size: 30upx;
		line-height: 20upx;
	}
	
	/* 底部 */
	.bottom{
		width: 750upx;
		height: 98upx;
		background: #FFFFFF;
		position: fixed;
		z-index: 20upx;
		bottom: 98upx;
		box-shadow: 2px 1px 8px 1px #dcdcdc;
	}
	.Settle{
		width: 198upx;
		height: 98upx;
		background: #55A0FF;
		color: #FFFFFF;
		font-size: 34upx;
		text-align: center;
		line-height: 98upx;
		float: right;
		margin-left: 30upx;
	}
	.bottom-label{
		/* width: 100upx; */
		height: 98upx;
		display: block;
		text-align: center;
		float: right;
		line-height: 98upx;
		font-size: 32upx;
		margin-left: 10upx;
	}
	.blue{
		color: #0075EE;
	}
	.all{
		float: left;
		height: 98upx;
		line-height: 98upx;
		font-size: 30upx;
		margin-left: 18upx;
	}
	.choose-icon{
		width: 28upx;
		height: 28upx;
		margin-top: 35upx;
		float: left;
		margin-left: 29upx;
	}
	.jt{
		width: 18upx;
		height: 25upx;
		margin-top: 36upx;
		margin-left: 70upx;
	}
</style>
